<template>
  <div class="ms-list" ref="msList">
    <!--<el-row class="operation">-->
    <!--<el-breadcrumb separator="/">-->
    <!--<el-breadcrumb-item :to="{ path: '/' }">-->
    <!--<icon style="color: #0088cc" name="home"></icon>-->
    <!--</el-breadcrumb-item>-->
    <!--<el-breadcrumb-item>客户管理</el-breadcrumb-item>-->
    <!--<el-breadcrumb-item>问卷调查</el-breadcrumb-item>-->
    <!--</el-breadcrumb>-->
    <!--</el-row>-->
    <div class="questionnaire-box">
      <div v-if="previewShow" class="side">
        <el-card class="box-card">
          <ul class="question-types-box">
            <li>添加题型</li>
            <li v-for="item in questionTypes" class="types-li" @click="addQuestion(item.id)">
              <div class="default">
                <i style="text-align: center" class="el-icon-plus"></i>
                &nbsp;{{item.title}}
              </div>
              <div class="pitch-on"><i style="font-weight: bold; text-align: center" class="el-icon-plus"></i>&nbsp;{{item.title}}</div>
            </li>
          </ul>
        </el-card>
      </div>
      <div v-if="previewShow" class="content">
        <el-card class="box-card">
          <div slot="header" class="clearfix title">
            <span v-if="questionTitleShow" class="text" @click="editTitle">
              {{questionTitle}}
              <el-tooltip class="item" effect="dark" content="修改问卷标题" placement="right">
                <i class="title-icon el-icon-edit"></i>
              </el-tooltip>
            </span>
            <span v-if="!questionTitleShow" class="edit-title">
                <input
                  placeholder="示例问卷-标题"
                  v-model="questionTitle"
                  class="title-input"
                  v-focus
                  @blur="editTitle">
                </span>
          </div>
          <div class="explain">
            <p class="p-name">姓名：<input v-model="questionName" placeholder="请输入您的姓名"></p>
            <p>电话：<input v-model="questionPhone" placeholder="请输入您的电话"></p>
            <span v-if="questionExplainShow" class="text" @click="editExplain">
              {{questionExplain}} &nbsp;
              <el-tooltip class="item" effect="dark" content="修改问卷说明" placement="right">
              <i class="title-icon el-icon-edit"></i>
              </el-tooltip>
            </span>
            <span v-if="!questionExplainShow" class="edit-title">
                <input
                  placeholder="示例问卷-说明"
                  v-model="questionExplain"
                  class="title-input"
                  v-focus
                  @blur="editExplain">
            </span>
          </div>
        </el-card>

        <ul class="question-box">
          <li v-for="(item, index) in questionList" class="question">
            <el-card class="question-card">
              <div class="setup-group">
                <h4>Q{{index + 1}}</h4>
                <p class="question-icon">
                  <el-tooltip class="item" effect="dark" content="删除项目" placement="right">
                    <i class="el-icon-delete" @click="delItem(index)"></i>
                  </el-tooltip>
                </p>
                <p v-if="item.typeId !== 3 && item.typeId !== 4" class="question-icon">
                  <el-tooltip class="item" effect="dark" content="添加选项" placement="right">
                    <i class="el-icon-circle-plus-outline" @click="addAnswer(item)"></i>
                  </el-tooltip>
                </p>
                <p v-if="item.typeId !== 3 && item.typeId !== 4" class="question-icon">
                  <el-tooltip class="item" effect="dark" content="减少选项" placement="right">
                    <i class="el-icon-remove-outline" @click="delAnswer(item)"></i>
                  </el-tooltip>
                </p>
              </div>
              <div class="topic-type-con">
                <p class="q-title">
                  <span v-if="item.questionsShow" class="text" @click="item.questionsShow = !item.questionsShow">
                    {{item.questions === '' ? '请填写题目' : item.questions}}&nbsp;
                    <el-tooltip class="item" effect="dark" content="修改题目" placement="right">
                      <i class="title-icon el-icon-edit"></i>
                    </el-tooltip>
                  </span>
                  <input v-if="!item.questionsShow" type="text" v-model="item.questions" @blur="item.questionsShow = !item.questionsShow" v-focus>
                </p>
                <el-radio-group v-if="item.typeId === 1" v-model="item.value">
                  <p v-for="radio in item.answer" class="radio">
                    <el-radio :label="radio.label" :key="radio.value">
                      <span v-if="radio.show" class="text" @click="radio.show = !radio.show">
                        {{radio.value}} &nbsp;
                        <el-tooltip class="item" effect="dark" content="修改选项" placement="right">
                              <i class="title-icon el-icon-edit"></i>
                        </el-tooltip>
                      </span>
                      <input v-if="!radio.show" type="text" v-model="radio.value" @blur="radio.show = !radio.show" v-focus>
                    </el-radio>
                  </p>
                </el-radio-group>
                <el-checkbox-group v-else-if="item.typeId === 2" v-model="item.value">
                  <p v-for="(option, index) in item.answer">
                    <el-checkbox :label="option.value">
                    <span v-if="option.show" class="text" @click="option.show = !option.show">
                    {{option.value}} &nbsp;
                    <el-tooltip class="item" effect="dark" content="修改选项" placement="right">
                    <i class="title-icon el-icon-edit"></i>
                    </el-tooltip>
                    </span>
                      <input v-if="!option.show" type="text" v-model="option.value" @blur="option.show = !option.show" v-focus>
                    </el-checkbox>
                  </p>
                </el-checkbox-group>
                <div v-if="item.typeId === 3" class="textarea">
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 2, maxRows: 4}"
                    placeholder="请输入内容"
                    v-model="item.value">
                  </el-input>
                </div>
                <div v-else-if="item.typeId === 4">
                  <el-radio-group v-model="item.value">
                    <el-radio-button v-for="radio in item.answer" :label="radio" :key="radio"></el-radio-button>
                  </el-radio-group>
                  <div v-if="item.value !== ''" class="textarea nsp">
                    <el-input
                      type="textarea"
                      :autosize="{ minRows: 2, maxRows: 5}"
                      placeholder="请输入内容"
                      v-model="item.suggest">
                    </el-input>
                  </div>
                </div>
              </div>
            </el-card>
          </li>
        </ul>
      </div>
      <div v-if="!previewShow" class="content">
        <el-card class="box-card">
          <div slot="header" class="clearfix title">
            <span class="text">
              {{questionTitle}}
            </span>
          </div>
          <div class="explain">
            <p class="p-name">姓名：<input v-model="previewName" placeholder="请输入您的姓名"></p>
            <p>电话：<input v-model="previewPhone" placeholder="请输入您的电话"></p>
            <span class="text">
              {{questionExplain}} &nbsp;
            </span>
          </div>
        </el-card>
        <ul class="question-box">
          <li v-for="(item, index) in previewList" class="question">
            <el-card class="question-card">
              <div class="setup-group">
                <h4>Q{{index + 1}}</h4>
              </div>
              <div class="topic-type-con">
                <p class="q-title">
                  <span class="text">
                    {{item.questions}}&nbsp;
                  </span>
                </p>
                <el-radio-group v-if="item.typeId === 1" v-model="item.value">
                  <p v-for="radio in item.answer" class="radio">
                    <el-radio :label="radio.label" :key="radio.value">
                      <span class="text">
                        {{radio.value}} &nbsp;
                      </span>
                    </el-radio>
                  </p>
                </el-radio-group>
                <el-checkbox-group v-else-if="item.typeId === 2" v-model="item.value">
                  <p v-for="(option, index) in item.answer">
                    <el-checkbox :label="option.value">
                    <span class="text">
                    {{option.value}} &nbsp;
                    </span>
                    </el-checkbox>
                  </p>
                </el-checkbox-group>
                <div v-if="item.typeId === 3" class="textarea">
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 2, maxRows: 4}"
                    placeholder="请输入内容"
                    v-model="item.value">
                  </el-input>
                </div>
                <div v-else-if="item.typeId === 4">
                  <el-radio-group v-model="item.value">
                    <el-radio-button v-for="radio in item.answer" :label="radio" :key="radio"></el-radio-button>
                  </el-radio-group>
                  <div v-if="item.value !== ''" class="textarea nsp">
                    <el-input
                      type="textarea"
                      :autosize="{ minRows: 2, maxRows: 5}"
                      placeholder="请输入内容"
                      v-model="item.suggest">
                    </el-input>
                  </div>
                </div>
              </div>
            </el-card>
          </li>
        </ul>
      </div>
    </div>

    <p class="b-button">
      <el-button size="small" type="primary" @click="redactQuestionnaire">编辑问卷</el-button>
      <el-button size="small" type="primary" @click="previewQuestionnaire">预览问卷</el-button>
      <el-button size="small" type="primary" @click="submitSubmit">生成问卷</el-button>
    </p>

  </div>
</template>

<script>
  import Api from '@/api/customer/platform/client-survey'
  import FormTokenApi from '@/api/system/form-token'

  const questionTypesList = [{
    id: 0,
    typeId: 1,
    questions: '单选题',
    questionsShow: true,
    answer: [
      {label: 0, value: '选项1', show: true},
      {label: 1, value: '选项2', show: true},
      {label: 2, value: '选项3', show: true}
    ],
    value: ''
  }, {
    id: 1,
    typeId: 2,
    questions: '多选题',
    questionsShow: true,
    answer: [
      {value: '选项1', show: true},
      {value: '选项2', show: true},
      {value: '选项3', show: true}
    ],
    value: []
  }, {
    id: 3,
    typeId: 3,
    questions: '填空题',
    questionsShow: true,
    answer: '',
    value: ''
  }, {
    id: 4,
    typeId: 4,
    questions: 'NSP题',
    questionsShow: true,
    answer: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
    value: '',
    suggest: ''
  }]

  export default {
    data () {
      return {
        questionTypes: [{
          id: 0,
          title: '单选题'
        }, {
          id: 1,
          title: '多选题'
        }, {
          id: 2,
          title: '填空题'
        }, {
          id: 3,
          title: 'NPS题'
        }],
        questionList: [{
          id: 0,
          typeId: 1,
          questions: '单选题',
          questionsShow: true,
          answer: [
            {label: 0, value: '选项1', show: true},
            {label: 1, value: '选项2', show: true},
            {label: 2, value: '选项3', show: true}
          ],
          value: ''
        }, {
          id: 1,
          typeId: 2,
          questions: '多选题',
          questionsShow: true,
          answer: [
            {value: '选项1', show: true},
            {value: '选项2', show: true},
            {value: '选项3', show: true}
          ],
          value: []
        }, {
          id: 3,
          typeId: 3,
          questions: '填空题',
          questionsShow: true,
          answer: '',
          value: ''
        }, {
          id: 4,
          typeId: 4,
          questions: 'NSP题',
          questionsShow: true,
          answer: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
          value: '',
          suggest: ''
        }],
        questionTitle: '示例问卷-标题',
        questionTitleShow: true,
        questionExplain: '示例问卷-说明',
        questionExplainShow: true,
        questionName: '',
        questionPhone: '',
        previewShow: true,
        previewList: [],
        previewName: '',
        previewPhone: ''
      }
    },
    created () {
      this.addToken()
    },
    methods: {
      addToken () {
        FormTokenApi.create(response => {
          let status = response.status || 0
          let body = response.data || []
          if (status >= 200 && status <= 204) {
            this.token = body.token || ''
          }
        })
      },
      addQuestion (id) {
        let item = JSON.parse(JSON.stringify(questionTypesList[id]))
        item.id = this.questionList.length
        this.questionList.push(item)
      },
      editTitle () {
        this.questionTitleShow = !this.questionTitleShow
        if (this.questionTitle === '') {
          this.questionTitle = '示例问卷-标题'
        }
      },
      editExplain () {
        this.questionExplainShow = !this.questionExplainShow
        if (this.questionExplain === '') {
          this.questionExplain = '示例问卷-标题'
        }
      },
      delItem (index) {
        this.questionList.splice(index, 1)
      },
      addAnswer (item) {
        if (item.typeId === 1) {
          item.answer.push({label: item.answer.length, value: '选项', show: true})
        } else if (item.typeId === 2) {
          item.answer.push({value: '选项' + (item.answer.length + 1), show: true})
        }
      },
      delAnswer (item) {
        if (item.answer.length > 2) {
          item.answer.pop()
        }
      },
      redactQuestionnaire () {
        this.previewShow = true
      },
      previewQuestionnaire () {
        this.previewShow = false
//        previewList
        this.previewName = ''
        this.previewPhone = ''
        this.previewList = JSON.parse(JSON.stringify(this.questionList))
        for (let item of this.previewList) {
          if (item.typeId === 1) {
            item.value = ''
          } else if (item.typeId === 2) {
            item.value = []
          } else if (item.typeId === 3) {
            item.value = ''
          } else if (item.typeId === 4) {
            item.value = ''
            item.suggest = ''
          }
        }
      },
      submitSubmit () {
        let form = []
        form.token = this.token
        form.title = this.questionTitle
        form.summary = this.questionExplain
        form.questionNum = this.questionList.length
        form.questionList = []
        this.questionList.forEach(item => {
          let questionForm = {}
          questionForm = {question: {question: item.questions, typeId: item.typeId}}
          let answerForm = []
          if (item.typeId === 1 || item.typeId === 2) {
            item.answer.forEach(item1 => {
              answerForm.push({answer: item1.value})
            })
          }
          questionForm.answerList = answerForm
          form.questionList.push(questionForm)
        })
        Api.addQuestionnaire(form, response => {
          let status = response.status || 0
          let body = response.data || []
          if (status >= 200 && status <= 204) {
            this.$message.success('问卷已生成')
            this.addToken()
          } else {
            this.$message.error(body.error || '问卷生成失败')
          }
        })
      }
    }
  }
</script>
<!--<style scoped>-->
<!--ul {-->
<!--list-style: none; }-->

<!--.text:hover .title-icon {-->
<!--display: inline-block; }-->

<!--.text .title-icon {-->
<!--display: none; }-->

<!--.question-icon i {-->
<!--display: none; }-->

<!--.question:hover .question-icon i {-->
<!--display: inline-block; }-->

<!--.ms-list .questionnaire-box .side, .ms-list .questionnaire-box .content {-->
<!--display: inline-block; }-->
<!--.ms-list .questionnaire-box .side .box-card {-->
<!--padding: -20px; }-->
<!--.ms-list .questionnaire-box .side .box-card .question-types-box {-->
<!--width: 122px;-->
<!--padding: 0px;-->
<!--margin: -10px -26px -20px;-->
<!--text-align: center; }-->
<!--.ms-list .questionnaire-box .side .box-card .question-types-box li {-->
<!--height: 30px;-->
<!--line-height: 30px;-->
<!--border-bottom: 1px solid #f3f3f3; }-->
<!--.ms-list .questionnaire-box .side .box-card .question-types-box li .default {-->
<!--display: block; }-->
<!--.ms-list .questionnaire-box .side .box-card .question-types-box li .pitch-on {-->
<!--display: none; }-->
<!--.ms-list .questionnaire-box .side .box-card .question-types-box li:last-child {-->
<!--border-bottom: none; }-->
<!--.ms-list .questionnaire-box .side .box-card .question-types-box .types-li:hover {-->
<!--color: #409EFF; }-->
<!--.ms-list .questionnaire-box .side .box-card .question-types-box .types-li:hover .default {-->
<!--display: none; }-->
<!--.ms-list .questionnaire-box .side .box-card .question-types-box .types-li:hover .pitch-on {-->
<!--display: block;-->
<!--background-color: #dee9fd; }-->
<!--.ms-list .questionnaire-box .content {-->
<!--width: 800px;-->
<!--vertical-align: top; }-->
<!--.ms-list .questionnaire-box .content .box-card, .ms-list .questionnaire-box .content .question-card {-->
<!--margin-bottom: 5px; }-->
<!--.ms-list .questionnaire-box .content .box-card .title .text .title-icon, .ms-list .questionnaire-box .content .box-card .explain .text .title-icon {-->
<!--position: absolute; }-->
<!--.ms-list .questionnaire-box .content .box-card .title .text:hover .title-icon, .ms-list .questionnaire-box .content .box-card .explain .text:hover .title-icon {-->
<!--display: inline-block; }-->
<!--.ms-list .questionnaire-box .content .box-card .title {-->
<!--margin: -20px;-->
<!--text-align: center; }-->
<!--.ms-list .questionnaire-box .content .box-card .title .text {-->
<!--display: inline-block;-->
<!--height: 45px;-->
<!--margin-right: -20px;-->
<!--padding-right: 20px;-->
<!--line-height: 45px; }-->
<!--.ms-list .questionnaire-box .content .box-card .title .text .title-icon {-->
<!--top: 60px;-->
<!--right: 64%; }-->
<!--.ms-list .questionnaire-box .content .box-card .title .edit-title {-->
<!--display: inline-block;-->
<!--width: 80%; }-->
<!--.ms-list .questionnaire-box .content .box-card .title .edit-title input {-->
<!--width: 80%;-->
<!--height: 37px;-->
<!--margin-top: 2px;-->
<!--text-align: center; }-->
<!--.ms-list .questionnaire-box .content .box-card .explain {-->
<!--padding-left: 5px;-->
<!--margin: -20px -20px -20px 30px;-->
<!--min-height: 90px;-->
<!--line-height: 22px;-->
<!--font-size: 14px;-->
<!--border-left: 1px solid #f3f3f3; }-->
<!--.ms-list .questionnaire-box .content .box-card .explain p {-->
<!--margin: 0 0 5px 0; }-->
<!--.ms-list .questionnaire-box .content .box-card .explain .p-name {-->
<!--padding-top: 6px; }-->
<!--.ms-list .questionnaire-box .content .box-card .explain .text {-->
<!--margin-top: -20px; }-->
<!--.ms-list .questionnaire-box .content .box-card .explain .text .title-icon {-->
<!--top: 153px; }-->
<!--.ms-list .questionnaire-box .content .box-card .explain .edit-title input {-->
<!--width: 80%;-->
<!--margin-top: 4px; }-->
<!--.ms-list .questionnaire-box .content .question-box {-->
<!--margin: 0;-->
<!--padding: 0; }-->
<!--.ms-list .questionnaire-box .content .question-box .question .question-card {-->
<!--position: relative; }-->
<!--.ms-list .questionnaire-box .content .question-box .question .question-card .setup-group, .ms-list .questionnaire-box .content .question-box .question .question-card .topic-type-con {-->
<!--display: inline-block; }-->
<!--.ms-list .questionnaire-box .content .question-box .question .question-card .setup-group {-->
<!--position: absolute;-->
<!--top: -32px;-->
<!--left: 0;-->
<!--width: 50px;-->
<!--padding: 8px 3px;-->
<!--text-align: center; }-->
<!--.ms-list .questionnaire-box .content .question-box .question .question-card .setup-group h4 {-->
<!--padding-top: 14px;-->
<!--margin-bottom: 0px;-->
<!--font-size: 14px; }-->
<!--.ms-list .questionnaire-box .content .question-box .question .question-card .setup-group p {-->
<!--margin: 0;-->
<!--padding-bottom: 5px; }-->
<!--.ms-list .questionnaire-box .content .question-box .question .question-card .topic-type-con {-->
<!--margin: -20px 0 -30px 30px;-->
<!--width: 95%;-->
<!--min-height: 120px;-->
<!--height: 100%;-->
<!--padding: 10px 8px;-->
<!--border-left: 1px solid #EDF0F0; }-->
<!--.ms-list .questionnaire-box .content .question-box .question .question-card .topic-type-con .q-title {-->
<!--margin: 0 0px 5px; }-->
<!--.ms-list .questionnaire-box .content .question-box .question .question-card .topic-type-con .radio {-->
<!--height: 22px;-->
<!--line-height: 22px;-->
<!--margin-bottom: 5px; }-->
<!--.ms-list .questionnaire-box .content .question-box .question .question-card .topic-type-con .textarea {-->
<!--width: 90%; }-->
<!--.ms-list .questionnaire-box .content .question-box .question .question-card .topic-type-con .textarea textarea {-->
<!--width: 80%; }-->
<!--.ms-list .questionnaire-box .content .question-box .question .question-card .topic-type-con .nsp {-->
<!--margin-top: 5px; }-->

<!--/*# sourceMappingURL=questionnaire.css.map */-->

<!--</style>-->
<style lang="scss" scoped>
  ul {
    list-style: none;
  }

  .text:hover {
    .title-icon {
      display: inline-block;
    }
  }

  .text {
    .title-icon {
      display: none;
    }
  }

  .question-icon {
    i {
      display: none;
    }
  }

  .b-button {
    margin-left: 118px;
  }
  .question:hover {
    .question-icon {
      i {
        display: inline-block;
      }
    }
  }

  .ms-list {
    .questionnaire-box {
      .side, .content {
        display: inline-block;
      }
      .side {
        position: fixed;
        .box-card {
          padding: -20px;
          .question-types-box {
            width: 122px;
            padding: 0px;
            margin: -10px -26px -20px;
            text-align: center;
            li {
              height: 30px;
              line-height: 30px;
              border-bottom: 1px solid #f3f3f3;
              .default {
                display: block;
              }
              .pitch-on {
                display: none;
              }
            }
            li:last-child {
              border-bottom: none;
            }
            .types-li:hover {
              color: #409EFF;
              .default {
                display: none;
              }
              .pitch-on {
                display: block;
                background-color: #dee9fd;
              }
            }
          }
        }
      }
      .content {
        width: 800px;
        margin-left: 118px;
        vertical-align: top;
        .box-card, .question-card {
          margin-bottom: 5px;
        }
        .box-card {
          .title, .explain {
            .text {
              .title-icon {
                position: absolute;
              }
            }
            .text:hover {
              .title-icon {
                display: inline-block;
              }
            }
          }
          .title {
            margin: -20px;
            text-align: center;
            .text {
              display: inline-block;
              height: 45px;
              margin-right: -20px;
              padding-right: 20px;
              line-height: 45px;
              .title-icon {
                top: 60px;
                right: 64%;
              }
            }
            .edit-title {
              display: inline-block;
              width: 80%;
              input {
                width: 80%;
                height: 37px;
                margin-top: 2px;
                text-align: center;
              }
            }
          }
          .explain {
            padding-left: 5px;
            margin: -20px -20px -20px 30px;
            min-height: 90px;
            line-height: 22px;
            font-size: 14px;
            border-left: 1px solid #f3f3f3;
            p {
              margin: 0 0 5px 0;
            }
            .p-name {
              padding-top: 6px;
            }
            .text {
              margin-top: -20px;
              .title-icon {
                top: 153px;
              }
            }
            .edit-title {
              input {
                width: 80%;
                margin-top: 4px;
              }
            }
          }
        }
        .question-box {
          margin: 0;
          padding: 0;
          .question {
            .question-card {
              position: relative;
              .setup-group, .topic-type-con {
                display: inline-block;
              }
              .setup-group {
                position: absolute;
                top: -32px;
                left: 0;
                width: 50px;
                padding: 8px 3px;
                text-align: center;
                h4 {
                  padding-top: 14px;
                  margin-bottom: 0px;
                  font-size: 14px;
                }
                p {
                  margin: 0;
                  padding-bottom: 5px;
                }
              }
              .topic-type-con {
                margin: -20px 0 -30px 30px;
                width: 95%;
                min-height: 120px;
                height: 100%;
                padding: 10px 8px;
                border-left: 1px solid #EDF0F0;
                .q-title {
                  margin: 0 0px 5px;
                }
                .radio {
                  height: 22px;
                  line-height: 22px;
                  margin-bottom: 5px;
                }
                .textarea {
                  width: 90%;
                  textarea {
                    width: 80%;
                  }
                }
                .nsp {
                  margin-top: 5px;
                }
              }
            }
          }
        }
      }
    }
  }
</style>
